import showConfig from '../flowable/showConfig'

export default {
  props: {
    modeler: {
      type: Object,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    categorys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeKey: ['1'],
      listeningColumns: [
        {
          title: "事件",
          dataIndex: "event",
          align: "center"
        }, {
          title: "类型",
          dataIndex: "type",
          align: "center"
        }, {
          title: "类名",
          dataIndex: "className",
          align: "center"
        }, {
          title: "操作",
          scopedSlots: { customRender: 'operate' },
        }
      ],
      globalColumns: [
        {
          title: "值",
          dataIndex: "event",
          align: "center"
        }, {
          title: "操作",
          dscopedSlots: { customRender: 'operate' },
          align: "center"
        }
      ],
      dwpVisible: false,
      expVisible: false,
      multiVisible: false
    }
  },
  watch: {
    'formData.id': function (val) {
      this.updateProperties({ id: val })
    },
    'formData.name': function (val) {
      this.updateProperties({ name: val })
    },
    'formData.code': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:code': val })
    },
    'formData.formId': function (val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:formId': val })
    },
    'formData.documentation': function (val) {
      if (!val) {
        this.updateProperties({ documentation: [] })
        return
      }
      const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
      this.updateProperties({ documentation: [documentationElement] })
    },
    'formData.color': function (val) {
      this.setColor({ fill: val, stroke: val })
      this.updateProperties({ color: val })
    }
  },
  methods: {
    updateProperties(properties) {
      const modeling = this.modeler.get('modeling')
      modeling.updateProperties(this.element, properties)
    },
    setColor(properties) {
      const modeling = this.modeler.get('modeling')
      modeling.setColor(this.element, properties)
    },
    showDwp() {
      this.dwpVisible = !this.dwpVisible;
    },
    showExp() {
      this.expVisible = !this.expVisible;
    },
    showModal(val) {
      this.$refs[val].showModal()
    },
    showMulti() {
      this.multiVisible = !this.multiVisible;
    },
    getDataElement(val) {
      this[val] = this.element.businessObject.extensionElements?.values
        .filter(item => item.$type === 'flowable:TaskListener')
        .map(item => {
          let type
          if ('class' in item) type = 'class'
          if ('expression' in item) type = 'expression'
          if ('delegateExpression' in item) type = 'delegateExpression'
          return {
            event: item.event,
            type: type,
            className: item[type],
            params: item.fields?.map(field => {
              let fieldType
              if ('stringValue' in field) fieldType = 'stringValue'
              if ('expression' in field) fieldType = 'expression'
              return {
                name: field.name,
                type: fieldType,
                value: field[fieldType]
              }
            }) ?? []
          }
        }) ?? []
    },
    // 任务监听修改xml
    updateElement(val) {
      if (this[val]?.length) {
        let extensionElements = this.element.businessObject.get('extensionElements')
        if (!extensionElements) {
          extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
        }
        // 清除旧值
        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
        this[val].forEach(item => {
          const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
          taskListener['event'] = item.event
          taskListener[item.type] = item.className
          if (item.params && item.params.length) {
            item.params.forEach(field => {
              const fieldElement = this.modeler.get('moddle').create('flowable:Field')
              fieldElement['name'] = field.name
              fieldElement[field.type] = field.value
              // 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
              // const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
              // fieldElement[field.type] = valueElement
              taskListener.get('fields').push(fieldElement)
            })
          }
          extensionElements.get('values').push(taskListener)
        })
        this.updateProperties({ extensionElements: extensionElements })
      } else {
        const extensionElements = this.element.businessObject[`extensionElements`]
        if (extensionElements) {
          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
        }
      }
    },
  },
  computed: {
    elementType() {
      const bizObj = this.element.businessObject
      return bizObj.eventDefinitions
        ? bizObj.eventDefinitions[0].$type
        : bizObj.$type
    },
    showConfig() {
      return showConfig[this.elementType] || {}
    }
  }
}
